<template>
<div class="container">
    <div class="flex-row">
        <div class="room">
            <div class="card">
                <img class="head-img" src="https://disk.xiaotao2333.top:344/api/user/avatar" />
                <div class="anchor-container">
                    <div class="anchor-title">{{state.anchor.name}}的直播间</div>
                    <div class="anchor-info">
                        <span>{{state.anchor.name}}</span>
                        <el-tag v-for="(item) in state.anchor.identity" :key="item.title" :type="item.type" size='small'>{{item.title}}</el-tag>
                    </div>
                </div>
                <div class="btns">
                    <el-button type="warning" size="small">关注主播</el-button>
                </div>
            </div>
            <Dplayer :anchorNo='state.anchorNo' @send="send" @peopleNum='peopleNum' :webSocketUrl='state.webSocketUrl'></Dplayer>
        </div>
        <div class="chat-box">
            <div class="chat-info">
                <div>{{state.anchor.name}}的聊天室</div>
                <div>在线人数：{{state.peopleNum}}</div>
            </div>
            <div ref="chatMsgBox" class="chat-messages-box">
                <div class="message-item" v-for="item in state.messages" :key="item">
                <div class="name">游客：</div>
                <div class="content">{{item}}</div>
                </div>
            </div>
        </div>
    </div>

</div>
<el-dialog width='500px' title="选择主播" v-model:visible="state.dialogFormVisible">
    <template v-slot:default>
        <el-input placeholder="请输入主播房间号" v-model="state.form.anchorNo" clearable> </el-input>
        <div class="dialog-recommend">
            <div>在线主播：</div>
            <el-link v-for="(item) in state.onlineAnchors" :key="item" @click="goToView(item)">{{item}}</el-link>
        </div>
        <!-- <div class="dialog-recommend">
            <div>推荐主播：</div>
            <el-link v-for="(item) in state.anchors" :key="item.anchorNo" :type="item.identity[0].type">{{item.name}}({{item.identity[0].title}})</el-link>
        </div> -->
    </template>
    <template v-slot:footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="enterRoom">进入直播间</el-button>
        </div>
    </template>
</el-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import Dplayer from '../components/Dplayer.vue'
import { anchors } from '../js/LiveRoom.js'
import { Message } from 'element3'
const state = reactive({
    // webSocketUrl: 'http://blog.diyxi.top:3001/',
    webSocketUrl: 'http://live.diyxi.top:3001/',
    dialogFormVisible: false,
    form: {
        anchorNo: ''
    },
    anchorNo: null,
    anchor: {
        // title: '兄弟们，来战！下午3点半准时直播！！！',
        name: '大厅',
        identity: [{ title: '火爆主播', type: '' }]
    },
    onlineAnchors: [],
    messages: [],
    peopleNum: 0,
    ...toRefs(anchors)
})
const enterRoom = () => {
    if (state.form.anchorNo == '') {
        Message({
            message: '请输入主播房间号',
            type: 'error'
        })
        return
    }
    state.dialogFormVisible = false
    state.anchorNo = state.form.anchorNo
    state.anchor.name = state.anchorNo
}
const route = useRoute()
const send = (message) => {
    state.messages.push(message)
}
const getAnchors = async() => {
    fetch('https://live.xiaotao2333.top:344/api/getLiveList.php')
        .then(function(response) {
            return response.json()
        })
        .then(function(json) {
            state.onlineAnchors = json.map(e => e.split('.')[0])
        })
}
const goToView = (item) => {
    state.form.anchorNo = item
    enterRoom()
}
const getUrlNo = () => {
    if (route.query.no != null) {
        state.anchorNo = route.query.no
        state.anchor.name = state.anchorNo
        state.dialogFormVisible = false
    } else {
        getAnchors()
        state.dialogFormVisible = true
    }
}
const chatMsgBox = ref()
const chatMsgBoxGoToBottom = () => {
    nextTick(() => {
        chatMsgBox.value.scrollTop = chatMsgBox.value.scrollHeight
    })
}
watch(
    () => state.messages.length,
    (newValue, oldValue) => {
        chatMsgBoxGoToBottom()
    }
)
const peopleNum = (peopleNum) => {
    state.peopleNum = peopleNum
}
onMounted(() => {
    getUrlNo()
})

</script>


<style>
@media  (max-width: 500px) {
    .el-dialog {
        width: 90% !important;
    }
}
</style>
<style lang="scss" scoped>
@media  (max-width: 500px) {
    .btns {
        display: none;
    }
}
.card {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    position: relative;
    .head-img {
        width: 60px;
        height: 60px;
        margin: 10px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }

    .anchor-container {
        overflow: hidden;
        align-items: space-between;
        margin-left: 10px;
        .anchor-title {
            min-width:0;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            margin-right: 10px;
        }
        .anchor-info {
            span {
                font-size: 12px;
                margin-right: 10px;
            }
            white-space: nowrap;
        }
    }
    .btns {
        position: absolute;
        right: 20px;
    }
}
.room {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    background-color: #f2f3f5;
    border-radius: inherit;
}
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.dialog-recommend {
    margin: 10px;
    &>*{
        margin: 5px 5px;
    }
}
.chat-box {
    display: flex;
    background-color: #f2f3f5;
    flex-direction: column;
    width: 300px;
    border-radius: inherit;
    .chat-info {
        height: 60px;
        border-radius: inherit;
        text-align: right;
        margin: 10px;
    }
    .chat-messages-box {
        margin: 10px 0px 10px 10px;
        flex: 1;
        overflow-y: scroll;
        .message-item {
            margin: 10px 0px;
            .name {
                font-size: 13px;
                color: #f50;
                word-break: break-all;
            }
            .content {
                font-size: 14px;
                word-break: break-all;
            }
        }
    }
}
.flex-row {
    display: flex;
    flex-direction: row;
    width: 1444px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: #f2f3f5;
    border-radius: 5px;
    height: 100vh;
    max-height: 800px;
}
</style>
